
	var customerCompIds = new Array(
				"companyName","street1","street2","country","province","city","web","industryType",
				"customerStatusType","firstName","middleInitial","lastName","title","email","phone1","phone2",
				"phone3","phone4","source","category","grade","customerStage","action","closingProbability","owner",
				"notes","companySize","annualRevenue","competitor1","competitor2","competitor3"
				);
			
	var customerValidationCompIds = new Array(
				"companyName","street1","country","province","city","industryType",
				"firstName","title","email","phone1","source","grade","customerStage","category",
				"action","closingProbability","owner",
				"companySize","annualRevenue"
				);
	
	var staticCustomerId = '0';
	
 function createCustomerPanel(){
	
		var customerSearchCriteriaStore=CRM.commons.createComboStore('customerSearchCriteriaStoreid', 'customer/customerSearchCriteriaTypes');
    	
    	var customerStore=CRM.commons.createStore('customerStoreid',CRM.SPComp.customerDataArray,'searchcustomers/showCustomers');
    	
    	var activityStore=CRM.commons.createStore('activityStoreid',CRM.SPComp.activityDataArray,'searchactivities/showActivitiesByLead');
    	
    	var contactStore=CRM.commons.createStore('contactStoreid',CRM.SPComp.contactDataArray,'searchleads/showContacts');    	
    	
    	var opportunityStore = CRM.commons.createStore('opportunityStoreid',CRM.SPComp.opportunityDataArray,'searchopportunities/showOpportunitiesByLead');
    	    
        var customerStatusStore=CRM.commons.createComboStore('customerStatusStoreid','customer/customerStatusTypes','');

        var industryStore=CRM.commons.createComboStore('industryStoreid','customer/customerReqCombo','industryTypes');
      
        var sourceStore=CRM.commons.createComboStore('sourceStoreid','customer/customerReqCombo','sourceTypes');

        var categoryStore=CRM.commons.createComboStore('categoryStoreid','customer/customerReqCombo','categoryTypes');

        var gradeStore=CRM.commons.createComboStore('gradeStoreid','customer/customerReqCombo','gradeTypes');

        var stageStore=CRM.commons.createComboStore('stageStoreid','customer/customerReqCombo','stageTypes');

        var actionStore=CRM.commons.createComboStore('actionStoreid','customer/customerReqCombo','actionTypes');

        var closingProbabilityStore=CRM.commons.createComboStore('closingProbabilityStoreid','customer/customerReqCombo','closingProbabilityTypes');
       
        var countryStore=CRM.commons.createComboStore('countryStoreid','customer/countries','');

        var provinceStore=CRM.commons.createComboStore('provinceStoreid','customer/provinces','');

        var ownerStore=CRM.commons.createComboStore('ownerStoreid','customer/owners','');
        
        var uploadDocStore=CRM.commons.createStore('uploadDocStoreid',CRM.SPComp.uploadDocDataArray,'documents/docList');
        
        //For create new Opportunity form window 
        var confidencelevelStore = CRM.commons.createComboStore('confidencelevelStoreid','opportunity/opportunityReqCombo','confidencelevelTypes');
		var oppstageStore = CRM.commons.createComboStore('oppStageStoreid','opportunity/opportunityReqCombo','stageTypes');
		var statusStore = CRM.commons.createComboStore('statusStoreid','opportunity/opportunityReqCombo','statusTypes');
		var salespersonStore = CRM.commons.createComboStore('salespersonStoreid','opportunity/salespersonTypes','');
		
        //auto load variables
        
        var selectedCustomerId = 0;
        var selectedActivityId = 0;
        
        
                var customerPanel = {
                    xtype       : 'fieldset',
                    id          : 'customerPanel',
                    title       : 'Customer Information',
                    height      : 220,
                    width       : 525,
                    labelWidth  : 100,
                    layout      : 'form',
                    items       : [
                                    {
                                      xtype     : 'compositefield',
                                      fieldLabel: 'Name<font color=red>*</font>',
                                      items     : [
													{
													    xtype   : 'hidden',
													    id      : 'customerId',
													    value	: '0'
													 },
                                                    {
                                                        xtype   : 'textfield',
                                                        id      : 'firstName',
                                                        width   :  175
                                                        //allowBlank : false
                                                     },
                                                     {
                                                        xtype   : 'textfield',
                                                        id      : 'middleInitial',
                                                        width   :  30
                                                     },
                                                     {
                                                        xtype   : 'textfield',
                                                        id      : 'lastName',
                                                        width   :  175
                                                     }
                                                   ]
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'title',
                                        fieldLabel  : 'Title<font color=red>*</font>',
                                        width       : 180
                                        //allowBlank : false
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'email',
                                        fieldLabel  : 'Email<font color=red>*</font>',
                                        vtype       :'email',
                                        //blankText   : 'abc@yahoo.com',
                                        width       : 390
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'phone1',
                                        fieldLabel  : 'Phone (Work)<font color=red>*</font>',
                                        width       : 220
                                        //allowBlank  : false
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'phone2',
                                        fieldLabel  : 'Phone (Mobile)',
                                        width       : 220
                                        //allowBlank  : false
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'phone3',
                                        fieldLabel  : 'Phone (Home)',
                                        width       : 220
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'phone4',
                                        fieldLabel  : 'Fax',
                                        width       : 220
                                    }
                                  ]
                };

                var companyPanel = {
                    xtype       : 'fieldset',
                    id          : 'companyPanel',
                    title       : 'Company Information',
                    height      : 220,
                    width       : 525,
                    labelWidth  : 100,
                    layoupt      : 'form',
                    items       : [
                                    {
                                        xtype       : 'textfield',
                                        id          : 'companyName',
                                        fieldLabel  : 'Company Name<font color=red>*</font>',
                                        width       : 390
                                        //allowBlank  : false
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'street1',
                                        fieldLabel  : 'Address1<font color=red>*</font>',
                                        width       : 390
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'street2',
                                        fieldLabel  : 'Address2',
                                        width       : 390
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'city',
                                        fieldLabel  : 'City<font color=red>*</font>',
                                        width       : 200
                                    },
                                    {
                                        xtype       : 'compositefield',
                                        width       : 400,
                                        fieldLabel  : 'Province<font color=red>*</font>',
                                        items       : [
														{
														    xtype    	: 'textfield',
														    id       	: 'province',
														    store		: provinceStore,
														    displayField : 'criteria',
														    valueField  	: 'id',
														    triggerAction: 'all',
														    width		: 170,
														    editable		: false
														},
														{xtype:'displayfield', value: 'Country<font color=red>*</font>: '},
                                                        {
                                                           xtype    	: 'textfield',
                                                           id       	: 'country',
                                                           store		: countryStore,
                                                           displayField : 'criteria',
                                                           valueField  	: 'id',
                                                           triggerAction: 'all',
                                                           width		: 160,
                                                           editable		: false
                                                        }
                                                      ]
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'web',
                                        fieldLabel  : 'Web',
                                        width       : 390
                                    },
                                    {
                                        xtype       : 'compositefield',
                                        width       : 400,
                                        fieldLabel  : 'Industry Type<font color=red>*</font>',
                                        items       : [
														{
														    xtype       : 'combo',
														    id          : 'industryType',
														    //fieldLabel  : 'Industry Type',
														    store		: industryStore,
														    displayField: 'name',
														    valueField  : 'id',
														    value       :'SELECT',
														    triggerAction : 'all',
														    width       : 160,
														    editable	: false,
														    listeners	: {select : function(){
														    						bindValue('industryType', 'industryTypeId');
														    					} 
														    			  }
														},
														{
															xtype		: 'hidden',
															id			: 'industryTypeId'
														},
														{xtype:'displayfield', value: 'Status<font color=red>*</font>: ', width: 49},
														{
														    xtype       : 'combo',
														    id          : 'customerStatusType',
														    //fieldLabel  : 'Status',
														    store		: customerStatusStore,
														    displayField: 'criteria',
														    valueField  : 'id',
														    value		: 'Customer',
														    triggerAction : 'all',
														    width       : 170,
														    editable	: false,
														    listeners	: {select : function(){
														    						bindValue('customerStatusType', 'customerStatusTypeId');
														    					} 
														    			  }
														},
														{
															xtype		: 'hidden',
															id			: 'customerStatusTypeId',
															value		: '1'
														}
                                                       ]
                                    }
                                  ]
                };

	                var basicInfoPanel = {
	                    xtyp        : 'panel',
	                    id          : 'basicInfoPanel',
	                    name		: 'basicInfoPanel',
	                    width       : 1085,
	                    autoHeight  : true,
	                    layout      : 'hbox',
	                    padding     : '5px',
	                    items       : [companyPanel, customerPanel],
	                    frame       : true,
	                    tbar    	: {
				                          xtype       : 'toolbar',
				                          buttonAlign : 'right',
				                          id		  : 'topToolBar',
				                          items       : [
				                                          /*
														    {
														     xtype   : 'button',
														     id		: 'topNewButton',
														     text    : 'New',
														     handler	: newCustomerForm
														     },
														     '-',
														     */
					                                         {
					                                          xtype   : 'button',
					                                          id		: 'topEditButton',
					                                          text    : 'Edit',
					                                          handler :  function(){
					                                          				editCustomerForm();
					                                          			}
					                                         },
															 '-',
					                                         {
					                                          xtype   : 'button',
					                                          id	  : 'topSaveButton',
					                                          text    : 'Save',
					                                          handler : function(){
				                                      						ValidateAndSaveCustomer(this.getText());
			                                      			  			 }
					                                         },
					                                         '-',
					                                         {
						                                      xtype   : 'button',
						                                      id	  : 'topRemoveButton',
						                                      text    : 'Cancel',
						                                      handler : function(){
						                                    	  			cancelCustomerEntryForm();
						                                      			  }
						                                      }
				                                      ]
	                			}
	                };


                var customerProfilePanel = {
                    xtype       : 'fieldset',
                    id          : 'customerProfilePanel',
                    title       : 'Customer Profile',
                    //layout      : 'form',
                    labelWidth  : 100,
                    width       : 525,
                    height      : 168,
                    items       : [
									{
									    xtype       : 'compositefield',
									    fieldLabel  : 'Source<font color=red>*</font>',
									    items       : [
									                   {
									                       xtype    	: 'combo',
									                       id       	: 'source',
									                       store		: sourceStore,
					                                       displayField : 'name',
					                                       valueField	: 'id',
					                                       value        :'SELECT',
					                                       triggerAction: 'all',
									                       width	 	: 160,
									                       editable		: false,
									                       listeners	: {select : function(){
									                        						bindValue('source', 'sourceId');
									                        					} 
									                        			  }
									                    },
									                    {
									                    	xtype		: 'hidden',
									                    	id			: 'sourceId'
									                    },
									                   {xtype:'displayfield', value: 'Category<font color=red>*</font>:', width : 65},
									                   {
									                       xtype    	: 'combo',
									                       id       	: 'category',
									                       store		: categoryStore,
					                                       displayField	: 'name',
					                                       valueField  	: 'id',
					                                       value        :'SELECT',
					                                       triggerAction: 'all',
									                       width		: 160,
									                       editable		: false,
									                       listeners	: {select : function(){
									                        						bindValue('category', 'categoryId');
									                        					} 
									                        			  }
									                    },
									                    {
									                    	xtype		: 'hidden',
									                    	id			: 'categoryId'
									                    }
									                  ]
									},
									{
									    xtype       : 'compositefield',
									    fieldLabel  : 'Grade<font color=red>*</font>',
									    items       : [
									                   {
									                       xtype    	: 'combo',
									                       id       	: 'grade',
									                       store		: gradeStore,
					                                       displayField : 'name',
					                                       valueField  	: 'id',
					                                       value        :'SELECT',
					                                       triggerAction: 'all',
									                       width		: 160,
									                       editable		: false,
									                       listeners	: {select : function(){
									                        						bindValue('grade', 'gradeId');
									                        					} 
									                        			  }
									                    },
									                    {
									                    	xtype		: 'hidden',
									                    	id			: 'gradeId'
									                    },
									                   {xtype:'displayfield', value: 'Stage<font color=red>*</font>:', width : 65},
									                   {
									                       xtype    	: 'combo',
									                       id       	: 'customerStage',
									                       store		: stageStore,
					                                       displayField : 'name',
					                                       valueField  	: 'id',
					                                       triggerAction: 'all',
									                       width		: 160,
									                       value		: 'SELECT',
									                       editable		: false,
									                       listeners	: {select : function(){
									                        						bindValue('customerStage', 'customerStageId');
									                        					} 
									                        			  }
									                    },
									                    {
									                    	xtype		: 'hidden',
									                    	id			: 'customerStageId'
									                    }
									                  ]
									},
									{
									    xtype       : 'compositefield',
									    fieldLabel  : 'Action<font color=red>*</font>',
									    items       : [
									                   {
									                       xtype    	: 'combo',
									                       id       	: 'action',
									                       store		: actionStore,
					                                       displayField : 'name',
					                                       valueField  	: 'id',
					                                       value        :'SELECT',
					                                       triggerAction: 'all',
									                       width		: 160,
									                       editable		: false,
									                       listeners	: {select : function(){
									                        						bindValue('action', 'actionId');
									                        					} 
									                        			  }
									                    },
									                    {
									                    	xtype		: 'hidden',
									                    	id			: 'actionId'
									                    },
									                   {xtype:'displayfield', value: 'Prob.<font color=red>*</font>:', width : 65},
									                   {
									                       xtype    	: 'combo',
									                       id       	: 'closingProbability',
									                       store		: closingProbabilityStore,
					                                       displayField : 'name',
					                                       valueField  	: 'id',
					                                       value        :'SELECT',
					                                       triggerAction: 'all',
									                       width		: 160,
									                       editable		: false,
									                       listeners	: {select : function(){
									                        						bindValue('closingProbability', 'closingProbabilityId');
									                        					} 
									                        			  }
									                    },
									                    {
									                    	xtype		: 'hidden',
									                    	id			: 'closingProbabilityId'
									                    }
									                  ]
									},
									{
                                        xtype       : 'compositefield',
                                        width       : 400,
                                        fieldLabel  : 'Owner<font color=red>*</font>',
                                        items       : [
														{
														    xtype       : 'combo',
														    id          : 'owner',
														    //fieldLabel  : 'Owner',
														    store		: ownerStore,
														    displayField: 'name',
														    valueField  : 'id',
														    value       :'SELECT',
														    triggerAction : 'all',
														    width       : 160,
														    editable	: false,
														    listeners	: {select : function(){
														    						bindValue('owner', 'ownerId');
														    					} 
														    			  }
														}
                                                       ]
									},
					                {
					                	xtype		: 'hidden',
					                	id			: 'ownerId'
					                },
                                    {
                                        xtype       : 'textarea',
                                        id          : 'notes',
                                        fieldLabel  : 'Notes',
                                        width       : 390,
                                        height      : 28
                                    }
                                  ]
                };

                var companyProfilePanel = {
                    xtype       : 'fieldset',
                    id          : 'companyProfilePanel',
                    title       : 'Company Profile',
                    layout      : 'form',
                    labelWidth  : 100,
                    width       : 525,
                    height      : 168,
                    items       : [
                                    {
                                        xtype       : 'textfield',
                                        id          : 'companySize',
                                        fieldLabel  : 'Company Size',
                                        value		: '0',
                                        width       : 120
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'annualRevenue',
                                        fieldLabel  : 'Annual Revenue',
                                        value		: '0',
                                        width       : 120
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'competitor1',
                                        fieldLabel  : 'Competitor',
                                        width       : 390
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'competitor2',
                                        fieldLabel  : 'Competitor',
                                        width       : 390
                                    },
                                    {
                                        xtype       : 'textfield',
                                        id          : 'competitor3',
                                        fieldLabel  : 'Competitor',
                                        width       : 390
                                    }
                                  ]
                };
                


		                var customerSubTabPanel = {
		                    xtype       : 'tabpanel',
		                    id          : 'customerSubTabPanel',
		                    width       : 1085,
		                    height      : 240,
		                    activeTab   : 0,
		                    frame       : true,
		                    items       : [
		                                    {
		                                        xtype   : 'panel',
		                                        title   : 'Customer Analysis',
		                                        frame   : true,
		                                        layout  : 'hbox',
		                                        padding : '5px',
		                                        items   : [customerProfilePanel, companyProfilePanel]
		                                    },
		                                    
		                                    {
		                                    	xtype 	: 'panel',
		                                    	id		: 'opportunitiesPanel',
		                                    	title 	: 'Opportunities',
		                                    	items 	: [CRM.commons.createGrid('opportunitiesGrid', opportunityStore, CRM.SPComp.createOpportunityColumnModel())],
		                                    	tbar    : {
				                                    xtype       : 'toolbar',
				                                    buttonAlign : 'left',
				                                    items       : [
																   '-',
				                                                   {
				                                                    xtype   : 'button',
				                                                    id		: 'addNewOpportunityButton',
				                                                    text    : 'Add New',
				                                                    handler :  function(){
				                                                    			 var form = Ext.getCmp('mainPanel').getForm();
					                                                             var selectedCustomerId = form.findField('customerId').getValue();
			    																 CRM.SPComp.showOpportunityWindow(selectedCustomerId,'0',null);
				                                                     			}
				                                                   },
																   '-'
				                                                ]
				                                  }
		                                    },
		                                    
		                                    {
		                                    	xtype : 'panel',
		                                    	id	  : 'activitiesPanel',
		                                    	title : 'Activities',
		                                    	activeTab : 0,
		                                    	items : [CRM.commons.createGrid('activitiesGrid', activityStore, CRM.SPComp.createActivityColumnModel())],
		                                    	tbar        : {
				                                    xtype       : 'toolbar',
				                                    buttonAlign       : 'left',
				                                    items       : [
																   '-',
				                                                   {
				                                                    xtype   : 'button',
				                                                    id		: 'addNewActivityButton',
				                                                    text    : 'Add New',
				                                                    handler :  function(){
				                                                    				var form = Ext.getCmp('mainPanel').getForm();
         		    																var selectedCustomerId = form.findField('customerId').getValue();
				                                                    				showCustomerActivityScreen(true, selectedCustomerId, '0');
				                                                    			}
				                                                   },
																   '-'
				                                                ]
				                                  }
		                                    },
		                                    {
		                                    	xtype : 'panel',
		                                    	id	  : 'additionalContactPanel',
		                                    	title : 'Additional Contact',
		                                    	activeTab : 0,
		                                    	items : [CRM.commons.createGrid('contactsGrid', contactStore, CRM.SPComp.createContactColumnModel())],
		                                    	tbar        : {
				                                    xtype       : 'toolbar',
				                                    buttonAlign       : 'left',
				                                    items       : [
																   '-',
				                                                   {
				                                                    xtype   : 'button',
				                                                    id		: 'addNewContactButton',
				                                                    text    : 'Add New',
				                                                    handler :  function(){
				                                                    				var form = Ext.getCmp('mainPanel').getForm();
         		    																var selectedCustomerId = form.findField('customerId').getValue();
				                                                    				showContactScreen(true, selectedCustomerId, '0');
				                                                    			}
				                                                   },
																   '-'
				                                                ]
				                                  }
		                                    },
		                                    {
		                                    	xtype : 'panel',
		                                    	id	  : 'documentPanel',
		                                    	title : 'Document',
		                                    	activeTab : 0,
		                                    	items : [CRM.commons.createGrid('customerDocGrid', uploadDocStore, CRM.SPComp.createUploadDocColumnModel())],
		                                    	tbar        : {
				                                    xtype       : 'toolbar',
				                                    buttonAlign       : 'left',
				                                    items       : [
																   '-',
				                                                   {
																	icon	: '../images/upload.jpg',
				                                                    id		: 'uploadNewDocumentButton',
				                                                    tooltip : 'Upload New',
				                                                    handler :  function(){
				                                                    				var formPanel = Ext.getCmp('mainPanel');
				                                                    				var customerId = formPanel.getForm().findField('customerId').getValue();
				                                                    				showDocumentUploader(customerId);
				                                                    			}
				                                                   },
																   '-',
																   {
				                                                	    icon	: '../images/refresh.jpg',
					                                                    id		: 'showDocumentButton',
					                                                    //text    : 'Show',
					                                                    tooltip	: 'Refresh',
					                                                    handler :  function(){
					                                                    				var form = Ext.getCmp('mainPanel');
					                                                    				var myUploadGrid = form.findById('customerDocGrid');
					                                                    				var selectedCustomerId = form.getForm().findField('customerId').getValue();
					                                                    				showDoc(selectedCustomerId, myUploadGrid);
					                                                    			}
					                                                   },
																	'-'
				                                                ]
				                                  }
		                                    }
		                                    
		                                  ],
		                    bbar        : {
		                                    xtype       : 'toolbar',
		                                    buttonAlign : 'right',
		                                    id			: 'bottomToolBar',
		                                    items       : [
		                                                   /*
														   {
														    xtype   : 'button',
														    id		: 'newButton',
														    text    : 'New',
														    handler	: newCustomerForm
														   },
														   '-',
														   */
		                                                   {
		                                                    xtype   : 'button',
		                                                    id		: 'editButton',
		                                                    text    : 'Edit',
		                                                    handler :  function(){
		                                                    				editCustomerForm();
		                                                    			}
		                                                   },
														   '-',
		                                                   {
		                                                    xtype   : 'button',
		                                                    id		: 'saveButton',
		                                                    text    : 'Save',
		                                                    handler : function(){
					                                      				ValidateAndSaveCustomer(this.getText());
					                                      			  }
		                                                   },
		                                                   '-',
					                                       {
						                                    xtype   : 'button',
						                                    id	  	: 'removeButton',
						                                    text    : 'Cancel',
						                                    handler : function(){
				                                    	  				cancelCustomerEntryForm();
				                                      			  		}
					                                       }
		                                                ]
		                                  }
		                };
		                
               
                var searchTab = new Ext.Panel({
                		xtype 	: 'panel',
		     	    	id		: 'searchTab',
		     	    	title	: 'Search',
		     	    	width	: 1100,
		     	    	items	: [
									CRM.SPComp.createSearchComp('spSearchCustomerGridPanel', 'searchCriteria', 'criteriaValue', customerStore, CRM.SPComp.createCustomerColumnModel(), customerSearchCriteriaStore)
		     	    	     	  ]
                });
                
                var combineDetailsPanel = new Ext.Panel({
                	xtype	: 'panel',
                	id		: 'combineDetailsPanel',
                	width	: 1100,
                	autoHeight: true,
                	items	: [basicInfoPanel,customerSubTabPanel]
                });
                
                var detailsTab = new Ext.Panel({
                		xtype	: 'panel',
		     	    	id		: 'detailsTab',
		     	    	title	: 'Details',
		     	    	autoHeight : true,
		     	    	disabled: true,
		     	    	items	: [combineDetailsPanel],
		     	    	listeners: {activate: function(){
			 	    					if(staticCustomerId != '0'){
			 	    						showCustomerDetails(staticCustomerId);
			 	    					}
			 	    					switchForm(combineDetailsPanel, detailsTab);
			 	    				}
 	    				}
                });
                
                var newCustomerTab = new Ext.Panel({
	     	    	xtype	: 'panel',
	     	    	id		: 'newCustomerTab',
	     	    	title	: 'New',
	     	    	width	: 1080,
	     	    	autoHeight : true,
	     	    	items	:  [],
	     	    	listeners: {activate: function(){
	     	    					switchForm(combineDetailsPanel, newCustomerTab);
	     	    					newCustomerForm();
	     	    				 }
	     	    				}
               });
                
                var customerMainTab = new Ext.TabPanel({
                		xtype	: 'tabpanel',
                		id		: 'customerMainTab',
                		activeTab : 0,
                		height	: 650,
                		items	: [searchTab, detailsTab, newCustomerTab]
                });
                
      
                var mainPanel = new Ext.FormPanel({
                    id          : 'mainPanel',
                    height      : 710,
                    width       : 1100,
                    frame       : false,
                    layout      : 'vbox',
                    items       : [
                                    customerMainTab
                                  ]       
                });
                
           	 	
                //onload calls
                var form = Ext.getCmp('mainPanel');
                form.findById('activitiesPanel').setAutoScroll(true);
                form.findById('opportunitiesPanel').setAutoScroll(true);
                form.findById('additionalContactPanel').setAutoScroll(true);
                form.findById('documentPanel').setAutoScroll(true);
                
                validateFormOnLoad(mainPanel, customerValidationCompIds);
                return mainPanel;
	};
	

             
             function ValidateAndSaveCustomer(action){
               var form	= Ext.getCmp('mainPanel');   
               var validationSuccess = simpleFormValidation(form, customerValidationCompIds);
			 	if(validationSuccess == 'true'){
					saveCustomer(action);
				}
           	 };
               

                
				//functions
				function showCustomerDetails(selectedCustomerId){
					staticCustomerId = selectedCustomerId;
					var formPanel = Ext.getCmp('mainPanel');
					formPanel.getForm().findField('customerId').setValue(selectedCustomerId);
					formPanel.getForm().load({
					method  : 'GET',
 		            url     : 'customer/showCustomerDetails?customerId='+selectedCustomerId,
 		      		success : function() {
 		      					disableCustomerForm();
 		      					formPanel.findById('detailsTab').enable();
 		      					
 		      					var cmt 				= formPanel.findById('customerMainTab');
   		      					var activityGrd 		= cmt.findById('activitiesGrid');
   		      					var contactsGrd 		= cmt.findById('contactsGrid');
   		      					var opportunitiesGrd 	= cmt.findById('opportunitiesGrid');
   		      					var customerDocGrd 		= cmt.findById('customerDocGrid');
   		      					
   		      					reloadCustomerSubTabs(activityGrd, selectedCustomerId);
   		      					reloadCustomerSubTabs(opportunitiesGrd, selectedCustomerId);
   		      					reloadCustomerSubTabs(contactsGrd, selectedCustomerId);
   		      					reloadCustomerSubTabs(customerDocGrd, selectedCustomerId);
 		            			},
 		            failure :function() { 
 		                		alert ("Failure");
 		               			}
					});
   				    formPanel.findById('customerMainTab').setActiveTab('detailsTab');
				};
				
				function reloadCustomerSubTabs(tabGrid, customerId){
					tabGrid.store.reload({
	        			params: {
	        						leadId: customerId
	        					}
	        		});
				};
				
                function saveCustomer(){
                   var formPanel = Ext.getCmp('mainPanel');
                   var action = 'Save';
                   var selectedCustomerId = formPanel.getForm().findField('customerId').getValue();
                   var message = 'No action taken.';
                   
                   if(selectedCustomerId == '0'){
                	   action = 'save';
                	   message = 'Saved Successfully!';
                   }
                   if(selectedCustomerId != '0'){
                	   action = 'update';
                	   message = 'Updated Successfully!';
                   }
                   
                   
         	       var values = formPanel.getForm().getValues();
         	       var encoded = Ext.encode(values);
             	   Ext.Ajax.request({
             		   url		: 'customer/save?action='+action,
             		   method	: 'POST',
             		   success	: function(result, request){
		    			  			var jsonData = Ext.util.JSON.decode(result.responseText); 
		     			  			var responsedCustomerId = jsonData.data;
		     			   			alert("Customer "+message);
		     			   			disableCustomerForm();
		     			   			formPanel.getForm().findField('customerId').setValue(responsedCustomerId);
		     			   			//staticCustomerId = responsedCustomerId;
		     			   		  },
             		   failure 	: function(){
             			   			alert("failure");
             			   		  },
             		   jsonData : encoded   		  
             	   });
                };
                
                function showDocumentUploader(customerId){
                	createDocumentUploader(customerId);
                };

				function showContactScreen(popup, customerId, contactId ){
						if(popup == true){
							CRM.SPComp.createContactForm(customerId, contactId);
						}
						else{
							//showDetails();
						}
					};
					
				function showCustomerActivityScreen(popup, customerId, activityId, rowdata ){
						if(popup == true){
								//CRM.SPComp.createActivityForm(customerId, activityId, rowdata);
								createActivityForm(customerId, activityId);
					 		}
					 		else{
					 			showDetails();
					 		}
						 };						
				
						 
				function showDoc(leadCustomerId, myUploadGrid){
						//var form = Ext.getCmp('mainPanel');
						//var selectedCustomerId =form.getForm().findField('customerId').getValue();
						//var myUploadGrid = form.findById('customerDocGrid');
						myUploadGrid.store.removeAll();
						myUploadGrid.store.reload({
							params : {
								leadId : leadCustomerId
							 }
						});
					};
					
					

					

					function disableCustomerForm(){
						var form = Ext.getCmp('mainPanel');
						doFormReadOnly(form, customerCompIds, true); //this method is in FormUtil.js
						
						var topButtonPanel = Ext.getCmp('topToolBar');
						var buttonPanel = Ext.getCmp('bottomToolBar');
						
						buttonPanel.findById('saveButton').disable();
						topButtonPanel.findById('topSaveButton').disable();
						
						buttonPanel.findById('editButton').enable();
						topButtonPanel.findById('topEditButton').enable();
						
						form.findById('opportunitiesPanel').enable();
						form.findById('activitiesPanel').enable();
						form.findById('additionalContactPanel').enable();
						form.findById('documentPanel').enable();
						//applyCustomerAuthorization(); //this methods is in NewHeader.js
					}

					function editCustomerForm(){
						var form = Ext.getCmp('mainPanel');
						doFormReadOnly(form, customerCompIds, false); //this method is in FormUtil.js						
						
						var topButtonPanel = Ext.getCmp('topToolBar');
						var buttonPanel = Ext.getCmp('bottomToolBar');
						
						buttonPanel.findById('editButton').disable();
						topButtonPanel.findById('topEditButton').disable();
						
						buttonPanel.findById('saveButton').enable();
						topButtonPanel.findById('topSaveButton').enable();

						form.findById('opportunitiesPanel').enable();
						form.findById('activitiesPanel').enable();
						form.findById('additionalContactPanel').enable();
						form.findById('documentPanel').enable();			
					};
					
					function newCustomerForm(){
						editCustomerForm();
						var form = Ext.getCmp('mainPanel');
						form.getForm().reset();
						var topButtonPanel = Ext.getCmp('topToolBar');
						var buttonPanel = Ext.getCmp('bottomToolBar');
						
						/*
						Ext.getCmp('companyName').setValue(null);
						Ext.getCmp('street1').setValue(null);
						Ext.getCmp('street2').setValue(null);
						Ext.getCmp('country').setValue('SELECT');
						Ext.getCmp('province').setValue('SELECT');
						Ext.getCmp('city').setValue(null);
						Ext.getCmp('web').setValue(null);
						Ext.getCmp('industryType').setValue('SELECT');
						
						Ext.getCmp('customerId').setValue('0');
						Ext.getCmp('firstName').setValue(null);
						Ext.getCmp('middleInitial').setValue(null);
						Ext.getCmp('lastName').setValue(null);
						Ext.getCmp('title').setValue(null);
						Ext.getCmp('email').setValue(null);
						Ext.getCmp('phone1').setValue(null);
						Ext.getCmp('phone2').setValue(null);
						Ext.getCmp('phone3').setValue(null);
						Ext.getCmp('phone4').setValue(null);
						Ext.getCmp('source').setValue('SELECT');
						Ext.getCmp('category').enable();
						Ext.getCmp('category').setValue('SELECT');
						Ext.getCmp('grade').setValue('SELECT');
						Ext.getCmp('customerStage').setValue('SELECT');
						Ext.getCmp('action').setValue('SELECT');
						Ext.getCmp('closingProbability').setValue('SELECT');
						Ext.getCmp('customerStatusType').setValue('SELECT');
						Ext.getCmp('owner').setValue('SELECT');
						Ext.getCmp('notes').setValue(null);
						Ext.getCmp('companySize').setValue(null);
						Ext.getCmp('annualRevenue').setValue(null);
						Ext.getCmp('competitor1').setValue(null);
						Ext.getCmp('competitor2').setValue(null);
						Ext.getCmp('competitor3').setValue(null);
						*/

						buttonPanel.findById('saveButton').setText('Save');
						topButtonPanel.findById('topSaveButton').setText('Save');
						buttonPanel.findById('saveButton').enable();
						topButtonPanel.findById('topSaveButton').enable();	
						buttonPanel.findById('editButton').disable();
						topButtonPanel.findById('topEditButton').disable();
						
						form.findById('opportunitiesPanel').disable();
						form.findById('activitiesPanel').disable();
						form.findById('additionalContactPanel').disable();
						form.findById('documentPanel').disable();
						
						form.findById('opportunitiesGrid').store.removeAll();
						form.findById('activitiesGrid').store.removeAll();
						form.findById('contactsGrid').store.removeAll();
						form.findById('customerDocGrid').store.removeAll();							
						//applyCustomerAuthorization(); //this method is in NewHeader.js
					};

					

					function showMessage(){
			   			 Ext.MessageBox.show({
			         	            title: 'Confirm',
			         	            msg: 'Are you sure you want to delete this records:',
			         	            width:200,
			         	            buttons: Ext.MessageBox.OKCANCEL,
			         	            multiline: false,
			         	            fn: function(btn, text) {
			         	            	if (btn == 'ok') {
			         	            		deleteDetails();
			         	            	   }
			         	            	}
			         	           });
			   		};
			   		
			   		function cancelCustomerEntryForm(){
				   		var form = Ext.getCmp('mainPanel');
						doFormReadOnly(form, customerCompIds, false);
						form.getForm().reset();
						form.findById('customerMainTab').setActiveTab('searchTab');
						//form.findById('detailsTab').disable();
				   	};
				